﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="图片轮播.aspx.cs" Inherits="ProjectStudy.图片轮播" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .hide
    {
        display:none;
        }

.picshow .picwrap li {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 940px;
    height: 120px;
}
    </style>
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var count = $("div.picwrap>ul>li").length;
            var current = 0;

            var auto = setInterval(function () {
                if (current == count) {
                    current = 0;
                }               
                if (current == 0) {
                    $("div.picwrap>ul>li").eq(count - 1).fadeOut(500);
                    $("div.picwrap>ul>li").eq(0).fadeIn(500);
                }
                else {
                    $("div.picwrap>ul>li").eq(current - 1).fadeOut(800);
                    $("div.picwrap>ul>li").eq(current).fadeIn(800);
                }
                current++;
            }, 2000);

            $("div.picwrap>ul>li").mouseover(function () {
                //clearInterval(auto);
            });

            $("div.picwrap>ul>li").mouseout(function () {
                
            });
        });

        function autoPlay(current, count) {
            
        }
    </script>
</head>
<body>
<div class="picshow">
    <div class="picwrap">
        <ul>
            <li>
                <img src="images/banner/1.jpg" width="940" height="120" alt="" />
            </li>

            <li class="hide">
                <img src="images/banner/2.jpg" width="940" height="120" alt="" />
            </li>

            <li class="hide">
                <img src="images/banner/3.jpg" width="940" height="120" alt="" />
            </li>

            <li class="hide">
                <img src="images/banner/4.jpg" width="940" height="120" alt="" />
            </li>
        </ul>
    </div>
    <div class="butt buttons">
        <div class="trans_bg">
        </div>
        <ul>
            <li class="on">
                <img class="menu" src="" alt="" /></li>
            <li>
                <img class="menu" src="" alt="" /></li>
            <li>
                <img class="menu" src="" alt="" /></li>
        </ul>
    </div>
</div>
</body>
</html>
